<template>
  <div class="backend-detail">
    <div class="detail-info">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>社科基金申报详情</span>
            <el-button type="primary" @click="goList">返回列表</el-button>
          </div>
        </template>

        <div v-loading="loading">
          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">项目名称：</el-col>
            <el-col :span="20">{{ fundDetail.name }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">项目负责人：</el-col>
            <el-col :span="20">{{ fundDetail.projectLeader }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">成果形式：</el-col>
            <el-col :span="20">{{ fundDetail.achievementForm ? fundDetail.achievementForm == '1' ? '专著或论文' : '研究报告' : '' }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">填表日期：</el-col>
            <el-col :span="20">{{ format(fundDetail.fillTime) }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">负责人所在单位：</el-col>
            <el-col :span="20">{{ fundDetail.unit }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">主要参加者：</el-col>
            <el-col :span="20">{{ fundDetail.persons }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">附件：</el-col>
            <el-col :span="20">
              <upload-file-result :fileList="fileList" />
            </el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="4" class="detail-label">状态：</el-col>
            <el-col :span="20">{{ checkStatusFormat(fundDetail.checkStatus) }}</el-col>
          </el-row>
          
        </div>
      </el-card>
    </div>

    <div class="detail-opera">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>控制面板</span>
          </div>
        </template>

        <div class="opera-button">
          <el-dropdown>
            <el-button type="primary" circle>
              <el-icon ><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editfund" v-if="fundDetail.checkStatus == 0">编辑</el-dropdown-item>
                <el-dropdown-item @click="deletefund">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-card>

      <approval-node type="fund" :flowId="route.currentRoute.value.query.flowId" v-if="route.currentRoute.value.query.flowId"/>
      
    </div>
  </div>
</template>

<script>
export default { name: 'backendLearnfundDetail' }
</script>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router'
import { More } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import tEditor from "@/components/tinymceEditor/tEditor.vue"
import { http } from '@/utils/http/index';
import { format } from '@/plugins/moment.js'
import { checkStatusFieldFormat, reFileResult, isJsonString } from "@/utils/backend.js"
import { useAuthStore } from '@/stores/modules/auth.js';
import approvalNode from '../../../../components/backend/approvalNode.vue';
import uploadFileResult from "@/components/backend/fileList.vue"

/* 路由 */
const route = useRouter()

/* 用户信息 */
const authStore = useAuthStore()

onMounted(() => {
  getfundDetail()
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const fundDetail = ref({})

/* 附件列表 */
const fileList = ref([])

const checkStatusFormat = (status) => {
  return status == '1' || status == '0'  ? '待审批' : status == '2' ? '审批通过' : status == '3' ? '审批未通过' : ''
}

/* 获取详情内容 */
const getfundDetail = () => {
  loading.value = true
  http.$GET("/DeclarationM/GetSocialScienceFundDetailById", { Id: route.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    if (!res.result) return
    fundDetail.value = res.result

    /* 附件 */
    if(!isJsonString(res.result.files)){
      fileList.value = []
      return
    }
    if(res.result.files != ''){
      let fileName = JSON.parse(res.result.files)
      if(fileName.filePathArray){
        fileList.value = fileName.filePathArray
      }else{
        fileList.value = []
      }
    }
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败")
  })
}

/* 点击跳转编辑页面 */
const editfund = () => {
  route.push({
    path: "/backend/learn-fund/add",
    query: { id: route.currentRoute.value.query.id, type: 'edit' }
  })
}

/* 点击删除 */
const deletefund = () => {
  ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    http.$POST(`/DeclarationM/DelSocialScienceFundById?Id=${route.currentRoute.value.query.id}`).then(res => {
      if (res.IsError) {
        ElMessage({
          type: 'warning',
          message: '操作失败',
        })
      }else{
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        route.push({
          path: "/backend/learn-fund"
        })
      }
    }).catch(err => {
      ElMessage.warning("操作失败")
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}

/* 返回列表 */
const goList = () => {
  route.push({
    path: "/backend/learn-fund",
    query: route.currentRoute.value.query.currentPage ? { currentPage: route.currentRoute.value.query.currentPage } : {}
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>